<template>
	<div class="album">
		<!-- <h1>专辑详情。。{{$route.params.id}}</h1> -->
		<div class="album_info">
			<div class="album_header" :style="{backgroundImage: `url(${album_data.coverImgUrl})`}">
				<!-- 			<div class="head_img header_left">
				<img class="album_img" :src="album_data.coverImgUrl" alt="">
			</div>
			<div class="header_right">
				<div class="title">
					{{album_data.name}}
				</div>
				<div class="list_creater">
					...
				</div>
			</div> -->
			</div>
			<div class="album_intro">

				<div class="head_img header_left">
					<img class="album_img" :src="album_data.coverImgUrl" alt="">
					<span class="lsthd_icon">歌单</span>
					<i class="u-earp_num iconfont icon-V">{{album_data.playCount | formatPlaycount}}</i>
				</div>
				<div class="header_right">
					<div class="title">
						{{album_data.name}}
					</div>
					<div class="list_creater">
						
					</div>
				</div>
			</div>
		</div>
		<div class="pylst_list">
			<p class="u-smtitle">歌曲列表</p>
		</div>
				<newest_music 
			:song_name="item.name" 
			:artists_name="item.ar"
			:album_name = "item.al.name"
			:song_id = "item.id"
			:picUrl = 'item.al.picUrl'
			:id_list = 'id_list'
			:idx = "index"
			v-for="(item,index) in album_data.tracks" :key='index'></newest_music>
		<div class="cmt_title">
			最新评论
		</div>
		<comment :comment="comment_arr"></comment>
	</div>

</template>

<script>
	import {
		get_list
	} from '../API/rank.js';
	// import { get_song_detail } from '../API/common.js';
	import newest_music from './Home/Recommand/newest_music.vue';
	import { get_comment } from '../API/album.js';
	
	//引入评论组件
	import comment from '../components/comment/comment.vue'
	export default {
		async created() {
			await get_list(this.$route.params.id).then(res => {
				console.log(res, '专辑详情');
				this.album_data = res.data.playlist;
			});
			this.id_list = this.album_data.trackIds.map((el) => {
				return el.id;
			});
			await get_comment(this.$route.params.id).then(res=>{
				this.comment_arr = res.data.comments
			})
		},
		data() {
			return {
				album_data: Object,
				id_list: [],
				comment_arr: []
			};
		},
		components: {
			newest_music,
			comment
		}
	}
</script>

<style lang="scss" scoped>
	.album_info {
		width: 375px;
		height: 186px;
		padding: 30px 10px 30px 15px;
		overflow: hidden;
		position: relative;

		.album_header {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
			transform: scale(1.5);
			filter: blur(15px);
			position: absolute;
			left: 0;
			top: 0;

			z-index: 0;
		}

		.album_intro {
			display: flex;
			position: relative;
			z-index: 2;

			.head_img {
				width: 126px;
				height: 126px;

				.album_img {
					width: 100%;
				}
			}

			.header_left {
				position: relative;

				.lsthd_icon {
					// position: absolute;
					position: absolute;
					z-index: 3;
					top: 10px;
					left: 0;
					padding: 0 8px;
					height: 17px;
					color: #fff;
					font-size: 9px;
					text-align: center;
					line-height: 17px;
					background-color: rgba(217, 48, 48, .8);
					border-top-right-radius: 17px;
					border-bottom-right-radius: 17px;
				}

				.u-earp_num {
					position: absolute;
					right: 2px;
					top: 0;
					z-index: 3;
					padding-left: 15px;
					color: #fff;
					font-size: 12px;
					background-position: 0;
					background-repeat: no-repeat;
					background-size: 11px 10px;
					text-shadow: 1px 0 0 rgba(0, 0, 0, .15);
				}
			}

			.header_right {
				margin-left: 16px;
				font-size: 17px;
				width: 208px;
				height: 126px;

				.title {
					text-align: left;
					color: white;
				}
			}
		}

	}

	.pylst_list {
		.u-smtitle {
			height: 23px;
			line-height: 23px;
			padding: 0 10px;
			font-size: 12px;
			color: #666;
			background-color: #eeeff0;
			text-align: left;
		}
	}
	.cmt_title{
		height: 23px;
		line-height: 23px;
		padding: 0 10px;
		font-size: 12px;
		color: #666;
		background-color: #eeeff0;
		text-align: left;
	}
</style>
